import 'package:auto_route/auto_route.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '../../AppRouter.gr.dart';
import '../../response/CreateResponse.dart';

class Item extends StatelessWidget {
  final AppItem item;

  const Item({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    var cover = "000";
    var id = item.id;
    var index2 = id % 114;
    if (index2 < 10) {
      cover = "00$index2";
    } else if (index2 >= 10 && index2 < 100) {
      cover = "0$index2";
    } else {
      cover = " $index2";
    }
    return GestureDetector(
      onTap: () {
        context.router.push(TextCreateRoute(appId: item.id));
      },
      child: Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(8),
          ),
        ),
        child: Stack(
          children: [
            CachedNetworkImage(
              placeholder: (context, url) => const Center(
                child: CircularProgressIndicator(),
              ),
              errorWidget: (context, url, error) => CachedNetworkImage(
                  imageUrl:
                      "https://bootx-ai.oss-cn-beijing.aliyuncs.com/res/ap/create_000.png"),
              imageUrl:
                  "https://bootx-ai.oss-cn-beijing.aliyuncs.com/res/ap/create_$cover.png",
              fit: BoxFit.cover,
            ),
            Positioned(
              top: 44,
              left: 0,
              right: 0,
              child: Container(
                padding: const EdgeInsets.only(left: 18, right: 16),
                width: double.infinity,
                color: Colors.transparent,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item.name,
                      style: const TextStyle(
                          color: Colors.white, fontWeight: FontWeight.bold),
                    ),
                    Text(
                      item.memo,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
